.main_content {
  width: 100%;
  height: 100%;
  background: #f5f3ff;
  border-radius: 20rpx;
}

.content {
  width: 100%;
  height: calc(100% - 140rpx);
  padding: 0 120rpx;
  display: flex;
  align-items: center;
}

.box {
  width: 100%;
}

.select {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.select_content {
  width: auto;
  margin-right: 40rpx;
  margin-bottom: 40rpx;
}

.select_box {
  width: 100%;
  height: 64rpx;
  padding-left: 40rpx;
  padding-right: 20rpx;
  border-radius: 32rpx;
  background-color: #ffffff;
  border: 2rpx solid #dddddd;
  display: flex;
  justify-content: space-between;
  align-items: center;

  text {
    width: auto;
    padding-right: 20rpx;
    font-size: 32rpx;
    color: #0091ea;
    font-weight: bold;
  }

  .select_icon {
    width: 28rpx;
    margin-left: 40rpx;
  }
}

.button {
  width: auto;
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button_content {
  width: 240rpx;
  height: 64rpx;
  margin: 0 20rpx;
  border: 4rpx solid #0091ea;
  border-radius: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  &:nth-child(1) {
    background: #589e75;
  }

  &:nth-child(2) {
    background: #d67b10;
  }

  &:nth-child(3) {
    background: #95ab00;
  }

  &.active {
    background: #999;

    &::after {
      content: "";
      width: 0px;
      height: 0px;
      border-width: 20rpx;
      border-style: solid;
      border-color: transparent transparent #0091ea transparent;
      position: absolute;
      top: -40rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  text {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
  }
}